require(['config'],()=>{
    require(['pAjax'],()=>{
        class Index{
            constructor(){
                this.ul = document.querySelector('#shopping')
                this.span = document.querySelector('.text9')
                this.init()
            }
            init(){
                this.request()       
                this.totalNum()
            }
            request(){
                //发送请求
               pAjax({url:'/api/goods.json'}) 
               .then(data=>{
                   //json数据转成js
                //    console.log(data);
                   let res = JSON.parse(data)
                   //数据太多太大，截取24条渲染页面
                    res = res.slice(0,24) 
                    // console.log(res);
                    this.render(res)
               })
            }
            //渲染页面
            render(data){
            //     //hide 多行省略
                data.forEach(item=>{
                    this.ul.innerHTML +=
                     `
                   <li>
                    <a href="html/detail.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                    <div class="pic">
                        <img src="${item.img_small_logo}">
                    </div>
                    <p class="title hide">${item.title}</p>
                    </a>
                    <div class="jiage">
                    <span class="price"> <i>￥</i>${item.price}</span>
                    <button data-id=${item.goods_id}>加入购物车</button>
                    </div>
                    
                </li> 
                    `               
                })
                this.bindHtml(data)
            }
            // 绑定点击事件，用事件委派
            bindHtml(data){
                this.ul.onclick = (e)=>{
                    let target = e.target || e.srcElement
                    if(target.nodeName == 'BUTTON'){
                        //获取对应点击按钮的id
                        let id = target.dataset.id - 0
                       let goods = data.find(item=>{return item.goods_id ==id})
                       console.log(goods);
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    if(!list.length){
                        list.push(goods)
                        goods.cart_number = 1
                    }else{
                        let res = list.some(item=>{return item.goods_id ==id})
                        if(res){
                            let index = list.findIndex(item=>{return item.goods_id ==id})
                            list[index].cart_number++
                        }else{
                            list.push(goods)
                            goods.cart_number = 1
                        }
                    }
                    
                    localStorage.setItem('cart', JSON.stringify(list))
                    this.totalNum()
                    }
                }
            }
        totalNum(){
            let list = JSON.parse(localStorage.getItem('cart')) || []
            let num = 0
            list.forEach(item=>{
                num += item.cart_number
            })
            this.span.innerHTML = num
        }
        
            
        }
        new Index()
    })
})

let smallBox = document.querySelector('.smallBox')
let mask = document.querySelector('.smallBox>span')
let bigBox = document.querySelector('.bigBox')
let pic = document.querySelector('.bigBox>img')

//当鼠标划过smallBox元素的时候让遮罩层和大盒子出现
smallBox.onmouseover = function(){
    mask.style.display = 'block'
    bigBox.style.display = 'block'
}
//当鼠标移出smallBox元素的时候让遮罩层和大盒子隐藏
smallBox.onmouseout = function(){
    mask.style.display = 'none'
    bigBox.style.display = 'none'
}


//当鼠标移入smallBox元素的时候让遮罩层进行移动
smallBox.onmousemove = function(e){
    //获取坐标
    let x = e.clientX - smallBox.offsetParent.offsetLeft - mask.offsetWidth/2
    let y = e.clientY - smallBox.offsetParent.offsetTop - mask.offsetHeight/2

    //边界值判断
    if(x<=0){
        x = 0
    }else if(x>=smallBox.offsetWidth - mask.offsetWidth){
        x = smallBox.offsetWidth - mask.offsetWidth
    }
    if(y<=0){
        y = 0
    }else if(y>=smallBox.offsetHeight - mask.offsetHeight){
        y = smallBox.offsetHeight - mask.offsetHeight
    }

    //进行赋值操作
    mask.style.left = x + 'px'
    mask.style.top = y + 'px'

    //进行计算比例
    let w =  x / (smallBox.offsetWidth - mask.offsetWidth)
    let h =  y / (smallBox.offsetHeight - mask.offsetHeight)
    
    //进行赋值操作
    pic.style.left = -w * (pic.offsetWidth - bigBox.offsetWidth) + 'px'
    pic.style.top = -h * (pic.offsetHeight - bigBox.offsetHeight) + 'px'
}
var arr = ['img/201.jpg', 'img/202.jpg', 'img/203.jpg', 'img/204.jpg'];
var sImgs = document.querySelectorAll('.fj');
var smallBoximg = document.querySelector('.smallBoximg')
var bigBoximg = document.querySelector('.bigBoximg')
sImgs.forEach(function (val, i) {
    val.onclick = function () {
        smallBoximg.src = arr[i]
        bigBoximg.src = arr[i]
    }
})

var txt = document.getElementById("text");  
var oUl = document.getElementById("list");  
var oBtn = document.getElementById("btn");

txt.onkeyup = function(){  
    oUl.innerHTML = "";
    var val = txt.value;  
    var oScript = document.createElement("script");//动态创建script标签  
    oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback";  
    //添加链接及回调函数  
    document.body.appendChild(oScript);//添加script标签  
    document.body.removeChild(oScript);//删除script标签  
}  
//回调函数  

function callback(data){  
    data.s.forEach(function(value){
     var oLi = document.createElement("li");
     oLi.innerHTML = "<a href=\"https://www.baidu.com/s?wd="+ value + "\">"+ value + "</a>";
     oUl.appendChild(oLi);
    })
    oUl.style.display = "block";  
} 
//点击跳转到百度页面，并搜索其中内容
oBtn.onclick = function(){
    var val = txt.value;
     location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";
}
var main1 = document.querySelector('.body')
main1.onclick = function(){
    oUl.style.display = 'none'
    // oUl.innerHTML = "";
}